ರಿಯಾಕ್ಟ್‌ನ `experimental_useEvent`: ಸ್ಥಿರ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ರೆಫರೆನ್ಸ್‌ಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು

ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್‌ಗಳು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ ಭಯಾನಕ "ಸ್ಟೇಲ್ ಕ್ಲೋಶರ್‌ಗಳು" ಸಮಸ್ಯೆಯನ್ನು ಎದುರಿಸುತ್ತಾರೆ. ಈ ಸಮಸ್ಯೆಯು ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಮರು-ರೆಂಡರ್ ಆದಾಗ ಉದ್ಭವಿಸುತ್ತದೆ, ಮತ್ತು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ತಮ್ಮ ಸುತ್ತಲಿನ ಸ್ಕೋಪ್‌ನಿಂದ ಹಳೆಯ ಮೌಲ್ಯಗಳನ್ನು ಸೆರೆಹಿಡಿಯುತ್ತವೆ. ರಿಯಾಕ್ಟ್‌ನ experimental_useEvent ಹುಕ್, ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು ಮತ್ತು ಒಂದು ಸ್ಥಿರ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ರೆಫರೆನ್ಸ್ ಒದಗಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ, ಇದು ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ನಿರೀಕ್ಷೆಯನ್ನು ಸುಧಾರಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ (ಆದರೂ ಪ್ರಸ್ತುತ ಪ್ರಾಯೋಗಿಕ) ಸಾಧನವಾಗಿದೆ. ಈ ಲೇಖನವು experimental_useEvent ನ ಸೂಕ್ಷ್ಮತೆಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ, ಅದರ ಉದ್ದೇಶ, ಬಳಕೆ, ಪ್ರಯೋಜನಗಳು ಮತ್ತು ಸಂಭಾವ್ಯ ಅನಾನುಕೂಲಗಳನ್ನು ವಿವರಿಸುತ್ತದೆ.

ಸ್ಟೇಲ್ ಕ್ಲೋಶರ್‌ಗಳ ಸಮಸ್ಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

experimental_useEvent ಗೆ ಧುಮುಕುವ ಮೊದಲು, ಅದು ಪರಿಹರಿಸುವ ಸಮಸ್ಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳೋಣ: ಸ್ಟೇಲ್ ಕ್ಲೋಶರ್‌ಗಳು. ಈ ಸರಳ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸಿ:

            import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      console.log("Count inside interval: ", count);
    }, 1000);

    return () => clearInterval(timer);
  }, []); // Empty dependency array - runs only once on mount

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಖಾಲಿ ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇ ಹೊಂದಿರುವ useEffect ಹುಕ್ ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟ್ ಆದಾಗ ಒಮ್ಮೆ ಮಾತ್ರ ಚಲಿಸುತ್ತದೆ. setInterval ಫಂಕ್ಷನ್ count ನ ಆರಂಭಿಕ ಮೌಲ್ಯವನ್ನು (ಅದು 0) ಸೆರೆಹಿಡಿಯುತ್ತದೆ. ನೀವು "Increment" ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ count ಸ್ಟೇಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿದರೂ, setInterval ಕಾಲ್‌ಬ್ಯಾಕ್ "Count inside interval: 0" ಎಂದು ಲಾಗ್ ಮಾಡುವುದನ್ನು ಮುಂದುವರಿಸುತ್ತದೆ ಏಕೆಂದರೆ ಕ್ಲೋಶರ್ ಒಳಗೆ ಸೆರೆಹಿಡಿಯಲಾದ count ಮೌಲ್ಯವು ಬದಲಾಗದೆ ಉಳಿಯುತ್ತದೆ. ಇದು ಸ್ಟೇಲ್ ಕ್ಲೋಶರ್‌ನ ಕ್ಲಾಸಿಕ್ ಪ್ರಕರಣವಾಗಿದೆ. ಇಂಟರ್ವಲ್ ಮರು-ರಚನೆಯಾಗುವುದಿಲ್ಲ ಮತ್ತು ಹೊಸ 'count' ಮೌಲ್ಯವನ್ನು ಪಡೆಯುವುದಿಲ್ಲ.

ಈ ಸಮಸ್ಯೆಯು ಕೇವಲ ಇಂಟರ್ವಲ್‌ಗಳಿಗೆ ಸೀಮಿತವಾಗಿಲ್ಲ. ಕಾಲಾನಂತರದಲ್ಲಿ ಬದಲಾಗಬಹುದಾದ ತನ್ನ ಸುತ್ತಲಿನ ಸ್ಕೋಪ್‌ನಿಂದ ಒಂದು ಫಂಕ್ಷನ್ ಮೌಲ್ಯವನ್ನು ಸೆರೆಹಿಡಿಯುವ ಯಾವುದೇ ಪರಿಸ್ಥಿತಿಯಲ್ಲಿ ಇದು ಪ್ರಕಟವಾಗಬಹುದು. ಸಾಮಾನ್ಯ ಸನ್ನಿವೇಶಗಳು ಸೇರಿವೆ:

• ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು (onClick, onChange, ಇತ್ಯಾದಿ.)
• ಮೂರನೇ-ಪಕ್ಷದ ಲೈಬ್ರರಿಗಳಿಗೆ ರವಾನಿಸಲಾದ ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು
• ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳು (setTimeout, fetch)

`experimental_useEvent` ಅನ್ನು ಪರಿಚಯಿಸಲಾಗುತ್ತಿದೆ

ರಿಯಾಕ್ಟ್‌ನ ಪ್ರಾಯೋಗಿಕ ವೈಶಿಷ್ಟ್ಯಗಳ ಭಾಗವಾಗಿ ಪರಿಚಯಿಸಲಾದ experimental_useEvent, ಸ್ಥಿರ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ರೆಫರೆನ್ಸ್ ಒದಗಿಸುವ ಮೂಲಕ ಸ್ಟೇಲ್ ಕ್ಲೋಶರ್‌ಗಳ ಸಮಸ್ಯೆಯನ್ನು ತಪ್ಪಿಸಲು ಒಂದು ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆ. ಇದು ಪರಿಕಲ್ಪನಾತ್ಮಕವಾಗಿ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:

• ಇದು ಒಂದು ಫಂಕ್ಷನ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ ಅದು ಮರು-ರೆಂಡರ್‌ಗಳ ನಂತರವೂ ಯಾವಾಗಲೂ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ತರ್ಕದ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಯನ್ನು ಉಲ್ಲೇಖಿಸುತ್ತದೆ.
• ಇದು ಅನಗತ್ಯವಾಗಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಮರು-ರಚಿಸುವುದನ್ನು ತಡೆಯುವ ಮೂಲಕ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುತ್ತದೆ, ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸುಧಾರಣೆಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
• ಇದು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಕಾಳಜಿಗಳ ಸ್ಪಷ್ಟ ಪ್ರತ್ಯೇಕತೆಯನ್ನು ನಿರ್ವಹಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಪ್ರಮುಖ ಟಿಪ್ಪಣಿ: ಹೆಸರೇ ಸೂಚಿಸುವಂತೆ, experimental_useEvent ಇನ್ನೂ ಪ್ರಾಯೋಗಿಕ ಹಂತದಲ್ಲಿದೆ. ಇದರರ್ಥ ಅದರ API ಭವಿಷ್ಯದ ರಿಯಾಕ್ಟ್ ಬಿಡುಗಡೆಗಳಲ್ಲಿ ಬದಲಾಗಬಹುದು ಮತ್ತು ಇದನ್ನು ಇನ್ನೂ ಉತ್ಪಾದನಾ ಬಳಕೆಗಾಗಿ ಅಧಿಕೃತವಾಗಿ ಶಿಫಾರಸು ಮಾಡಲಾಗಿಲ್ಲ. ಆದಾಗ್ಯೂ, ಅದರ ಉದ್ದೇಶ ಮತ್ತು ಸಂಭಾವ್ಯ ಪ್ರಯೋಜನಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮೌಲ್ಯಯುತವಾಗಿದೆ.

`experimental_useEvent` ಅನ್ನು ಬಳಸುವುದು ಹೇಗೆ

experimental_useEvent ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸುವುದು ಹೇಗೆ ಎಂಬುದರ ಕುರಿತು ಇಲ್ಲಿ ಒಂದು ವಿವರಣೆ ಇದೆ:

1. ಅನುಸ್ಥಾಪನೆ:

   ಮೊದಲಿಗೆ, ಪ್ರಾಯೋಗಿಕ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬೆಂಬಲಿಸುವ ರಿಯಾಕ್ಟ್ ಆವೃತ್ತಿಯನ್ನು ನೀವು ಹೊಂದಿರುವಿರೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ನೀವು react ಮತ್ತು react-dom ಪ್ರಾಯೋಗಿಕ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಬೇಕಾಗಬಹುದು (ಇತ್ತೀಚಿನ ಸೂಚನೆಗಳು ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ಬಿಡುಗಡೆಗಳ ಕುರಿತ ಎಚ್ಚರಿಕೆಗಳಿಗಾಗಿ ಅಧಿಕೃತ ರಿಯಾಕ್ಟ್ ದಸ್ತಾವೇಜನ್ನು ಪರಿಶೀಲಿಸಿ):

               npm install react@experimental react-dom@experimental
               
   
                 
                   Copy
                 
               
             

2. ಹುಕ್ ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುವುದು:

   react ಪ್ಯಾಕೇಜ್‌ನಿಂದ experimental_useEvent ಹುಕ್ ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಿ:

               import { experimental_useEvent } from 'react';
               
   
                 
                   Copy
                 
               
             

3. ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು:

   ನೀವು ಸಾಮಾನ್ಯವಾಗಿ ಮಾಡುವಂತೆ ನಿಮ್ಮ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಫಂಕ್ಷನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ, ಯಾವುದೇ ಅಗತ್ಯ ಸ್ಟೇಟ್ ಅಥವಾ ಪ್ರಾಪ್ಸ್‌ಗಳನ್ನು ಉಲ್ಲೇಖಿಸಿ.

4. `experimental_useEvent` ಅನ್ನು ಬಳಸುವುದು:

   ನಿಮ್ಮ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಪಾಸ್ ಮಾಡಿ experimental_useEvent ಅನ್ನು ಕಾಲ್ ಮಾಡಿ. ಇದು ಸ್ಥಿರ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಅದನ್ನು ನೀವು ನಿಮ್ಮ JSX ನಲ್ಲಿ ಬಳಸಬಹುದು.

ಹಿಂದಿನ ಇಂಟರ್ವಲ್ ಉದಾಹರಣೆಯಲ್ಲಿ ಸ್ಟೇಲ್ ಕ್ಲೋಶರ್ ಸಮಸ್ಯೆಯನ್ನು ಸರಿಪಡಿಸಲು experimental_useEvent ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುವ ಒಂದು ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

            import React, { useState, useEffect, experimental_useEvent } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const intervalCallback = () => {
    console.log("Count inside interval: ", count);
  };

  const stableIntervalCallback = experimental_useEvent(intervalCallback);

  useEffect(() => {
    const timer = setInterval(() => {
      stableIntervalCallback();
    }, 1000);

    return () => clearInterval(timer);
  }, []); // Empty dependency array - runs only once on mount

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

ಈಗ, ನೀವು "Increment" ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, setInterval ಕಾಲ್‌ಬ್ಯಾಕ್ ಅಪ್‌ಡೇಟ್ ಆದ count ಮೌಲ್ಯವನ್ನು ಸರಿಯಾಗಿ ಲಾಗ್ ಮಾಡುತ್ತದೆ. ಏಕೆಂದರೆ stableIntervalCallback ಯಾವಾಗಲೂ intervalCallback ಫಂಕ್ಷನ್‌ನ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಯನ್ನು ಉಲ್ಲೇಖಿಸುತ್ತದೆ.

`experimental_useEvent` ಬಳಸುವ ಪ್ರಯೋಜನಗಳು

experimental_useEvent ಬಳಸುವ ಪ್ರಾಥಮಿಕ ಪ್ರಯೋಜನಗಳು:

• ಸ್ಟೇಲ್ ಕ್ಲೋಶರ್‌ಗಳನ್ನು ನಿವಾರಿಸುತ್ತದೆ: ಇದು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ಯಾವಾಗಲೂ ತಮ್ಮ ಸುತ್ತಲಿನ ಸ್ಕೋಪ್‌ನಿಂದ ಇತ್ತೀಚಿನ ಮೌಲ್ಯಗಳನ್ನು ಸೆರೆಹಿಡಿಯುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆ ಮತ್ತು ಬಗ್‌ಗಳನ್ನು ತಡೆಯುತ್ತದೆ.
• ಸುಧಾರಿತ ಕಾರ್ಯಕ್ಷಮತೆ: ಸ್ಥಿರ ರೆಫರೆನ್ಸ್ ಒದಗಿಸುವ ಮೂಲಕ, ಇದು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಪ್ಪಿಸುತ್ತದೆ. React.memo ಅಥವಾ useMemo ಬಳಸುವ ಆಪ್ಟಿಮೈಸ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಇದು ವಿಶೇಷವಾಗಿ ಪ್ರಯೋಜನಕಾರಿಯಾಗಿದೆ.
• ಸರಳೀಕೃತ ಕೋಡ್: ಬದಲಾಗಬಹುದಾದ ಮೌಲ್ಯಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು useRef ಹುಕ್ ಅನ್ನು ಬಳಸುವಂತಹ ಅಥವಾ useEffect ನಲ್ಲಿ ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಅಪ್‌ಡೇಟ್ ಮಾಡುವಂತಹ ಪರ್ಯಾಯಗಳ ಅಗತ್ಯವನ್ನು ನಿವಾರಿಸುವ ಮೂಲಕ ಇದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸರಳಗೊಳಿಸಬಹುದು.
• ಹೆಚ್ಚಿದ ನಿರೀಕ್ಷೆ: ಕಾಂಪೊನೆಂಟ್ ನಡವಳಿಕೆಯನ್ನು ಹೆಚ್ಚು ನಿರೀಕ್ಷಿತ ಮತ್ತು ತರ್ಕಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ, ಇದು ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ ಕೋಡ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

`experimental_useEvent` ಅನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು

ಈ ಸಂದರ್ಭಗಳಲ್ಲಿ experimental_useEvent ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ:

• ನಿಮ್ಮ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ಅಥವಾ ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳಲ್ಲಿ ನೀವು ಸ್ಟೇಲ್ ಕ್ಲೋಶರ್‌ಗಳನ್ನು ಎದುರಿಸುತ್ತಿರುವಾಗ.
• ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯುವ ಮೂಲಕ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೀವು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಬಯಸಿದಾಗ.
• ನೀವು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಲ್ಲಿ ಸಂಕೀರ್ಣ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳು ಅಥವಾ ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ.
• ರೆಂಡರ್‌ಗಳಾದ್ಯಂತ ಬದಲಾಗಬಾರದ ಫಂಕ್ಷನ್‌ಗೆ ನಿಮಗೆ ಸ್ಥಿರ ರೆಫರೆನ್ಸ್ ಅಗತ್ಯವಿದ್ದಾಗ, ಆದರೆ ಅದಕ್ಕೆ ಇತ್ತೀಚಿನ ಸ್ಟೇಟ್‌ಗೆ ಪ್ರವೇಶ ಬೇಕಾದಾಗ.

ಆದಾಗ್ಯೂ, experimental_useEvent ಇನ್ನೂ ಪ್ರಾಯೋಗಿಕವಾಗಿದೆ ಎಂಬುದನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳುವುದು ಮುಖ್ಯ. ಉತ್ಪಾದನಾ ಕೋಡ್‌ನಲ್ಲಿ ಇದನ್ನು ಬಳಸುವ ಮೊದಲು ಸಂಭಾವ್ಯ ಅಪಾಯಗಳು ಮತ್ತು ವಿನಿಮಯಗಳನ್ನು ಪರಿಗಣಿಸಿ.

ಸಂಭಾವ್ಯ ಅನಾನುಕೂಲಗಳು ಮತ್ತು ಪರಿಗಣನೆಗಳು

experimental_useEvent ಗಮನಾರ್ಹ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆಯಾದರೂ, ಅದರ ಸಂಭಾವ್ಯ ಅನಾನುಕೂಲಗಳ ಬಗ್ಗೆ ತಿಳಿದಿರುವುದು ಅತ್ಯಗತ್ಯ:

• ಪ್ರಾಯೋಗಿಕ ಸ್ಥಿತಿ: API ಭವಿಷ್ಯದ ರಿಯಾಕ್ಟ್ ಬಿಡುಗಡೆಗಳಲ್ಲಿ ಬದಲಾವಣೆಗೆ ಒಳಪಟ್ಟಿರುತ್ತದೆ. ಇದನ್ನು ಬಳಸುವುದರಿಂದ ನಂತರ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಮರುರೂಪಿಸಬೇಕಾಗಬಹುದು.
• ಹೆಚ್ಚಿದ ಸಂಕೀರ್ಣತೆ: ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ ಇದು ಕೋಡ್ ಅನ್ನು ಸರಳಗೊಳಿಸಬಹುದಾದರೂ, ವಿವೇಚನೆಯಿಂದ ಬಳಸದಿದ್ದರೆ ಇದು ಸಂಕೀರ್ಣತೆಯನ್ನು ಕೂಡ ಸೇರಿಸಬಹುದು.
• ಸೀಮಿತ ಬ್ರೌಸರ್ ಬೆಂಬಲ: ಇದು ಹೊಸ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವೈಶಿಷ್ಟ್ಯಗಳು ಅಥವಾ ರಿಯಾಕ್ಟ್ ಆಂತರಿಕಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವುದರಿಂದ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳು ಹೊಂದಾಣಿಕೆ ಸಮಸ್ಯೆಗಳನ್ನು ಹೊಂದಿರಬಹುದು (ಆದರೂ ರಿಯಾಕ್ಟ್‌ನ ಪಾಲಿಫಿಲ್‌ಗಳು ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಪರಿಹರಿಸುತ್ತವೆ).
• ಅತಿಯಾದ ಬಳಕೆಯ ಸಾಧ್ಯತೆ: ಪ್ರತಿಯೊಂದು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು experimental_useEvent ನೊಂದಿಗೆ ಸುತ್ತುವರಿಯುವ ಅಗತ್ಯವಿಲ್ಲ. ಇದನ್ನು ಅತಿಯಾಗಿ ಬಳಸುವುದರಿಂದ ಅನಗತ್ಯ ಸಂಕೀರ್ಣತೆಗೆ ಕಾರಣವಾಗಬಹುದು.

`experimental_useEvent` ಗೆ ಪರ್ಯಾಯಗಳು

ನೀವು ಪ್ರಾಯೋಗಿಕ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಬಳಸಲು ಹಿಂಜರಿಯುತ್ತಿದ್ದರೆ, ಸ್ಟೇಲ್ ಕ್ಲೋಶರ್‌ಗಳ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು ಸಹಾಯ ಮಾಡುವ ಹಲವಾರು ಪರ್ಯಾಯಗಳಿವೆ:

1. `useRef` ಅನ್ನು ಬಳಸುವುದು:**

   ಮರು-ರೆಂಡರ್‌ಗಳಾದ್ಯಂತ ಉಳಿಯುವ ಬದಲಾಗಬಹುದಾದ ಮೌಲ್ಯವನ್ನು ಸಂಗ್ರಹಿಸಲು ನೀವು useRef ಹುಕ್ ಅನ್ನು ಬಳಸಬಹುದು. ಇದು ನಿಮ್ಮ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಒಳಗೆ ಸ್ಟೇಟ್ ಅಥವಾ ಪ್ರಾಪ್ಸ್‌ಗಳ ಇತ್ತೀಚಿನ ಮೌಲ್ಯವನ್ನು ಪ್ರವೇಶಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಸಂಬಂಧಿತ ಸ್ಟೇಟ್ ಅಥವಾ ಪ್ರಾಪ್ ಬದಲಾದಾಗಲೆಲ್ಲಾ ನೀವು ರೆಫ್‌ನ .current ಪ್ರಾಪರ್ಟಿಯನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಅಪ್‌ಡೇಟ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಇದು ಸಂಕೀರ್ಣತೆಯನ್ನು ಪರಿಚಯಿಸಬಹುದು.

               import React, { useState, useEffect, useRef } from 'react';
   
   function MyComponent() {
     const [count, setCount] = useState(0);
     const countRef = useRef(count);
   
     useEffect(() => {
       countRef.current = count;
     }, [count]);
   
     useEffect(() => {
       const timer = setInterval(() => {
         console.log("Count inside interval: ", countRef.current);
       }, 1000);
   
       return () => clearInterval(timer);
     }, []);
   
     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
       </div>
     );
   }
   
   export default MyComponent;
   
               
   
                 
                   Copy
                 
               
             

2. ಇನ್‌ಲೈನ್ ಫಂಕ್ಷನ್‌ಗಳು:**

   ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, JSX ಒಳಗೆ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಇನ್‌ಲೈನ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ ನೀವು ಸ್ಟೇಲ್ ಕ್ಲೋಶರ್‌ಗಳನ್ನು ತಪ್ಪಿಸಬಹುದು. ಇದು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಯಾವಾಗಲೂ ಇತ್ತೀಚಿನ ಮೌಲ್ಯಗಳಿಗೆ ಪ್ರವೇಶವನ್ನು ಹೊಂದಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಗಣನಾತ್ಮಕವಾಗಿ ದುಬಾರಿಯಾಗಿದ್ದರೆ ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು, ಏಕೆಂದರೆ ಇದು ಪ್ರತಿ ರೆಂಡರ್‌ನಲ್ಲಿ ಮರು-ರಚನೆಯಾಗುತ್ತದೆ.

               import React, { useState } from 'react';
   
   function MyComponent() {
     const [count, setCount] = useState(0);
   
     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => {
           console.log("Current count: ", count);
           setCount(count + 1);
         }}>Increment</button>
       </div>
     );
   }
   
   export default MyComponent;
   
               
   
                 
                   Copy
                 
               
             

3. ಫಂಕ್ಷನ್ ಅಪ್‌ಡೇಟ್‌ಗಳು:**

   ಹಿಂದಿನ ಸ್ಟೇಟ್ ಅನ್ನು ಅವಲಂಬಿಸಿರುವ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳಿಗಾಗಿ, ನೀವು setState ನ ಫಂಕ್ಷನ್ ಅಪ್‌ಡೇಟ್ ಫಾರ್ಮ್ ಅನ್ನು ಬಳಸಬಹುದು. ಇದು ನೀವು ಸ್ಟೇಲ್ ಕ್ಲೋಶರ್ ಮೇಲೆ ಅವಲಂಬಿತರಾಗದೆ ಅತ್ಯಂತ ಇತ್ತೀಚಿನ ಸ್ಟೇಟ್ ಮೌಲ್ಯದೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತಿರುವಿರಿ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

               import React, { useState } from 'react';
   
   function MyComponent() {
     const [count, setCount] = useState(0);
   
     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => setCount(prevCount => prevCount + 1)}>Increment</button>
       </div>
     );
   }
   
   export default MyComponent;
   
               
   
                 
                   Copy